<template>
	<view v-if="pageShow">
		<view class="mainpadding2" style="padding-bottom: 150rpx;">
			<view class="mainpadding_top ffffff"
				v-if="orderInfo.shop_data.appkey && orderInfo.shop_data.is_call_sdkfp==0">
				<view class="flexbetween">
					<view class="text_weight color_san white_nowrap">發票類型</view>
					<view class="flexright">
						<view class="xiaohong margin_right2">如需開立發票 請開啓</view>
						<u-switch inactiveColor="rgb(230, 230, 230)" v-model="fpopen" activeColor="#ffb800"></u-switch>
					</view>
				</view>
				<template v-if="fpopen">
					<view class="margin_top flexbetween">
						<view :class="opentype==0?'flexleft select':'flexleft noSelect'" @click="opentype=0">
							<image class="vote1Img"
								:src="opentype==0?'@/static/images/mine/vote1_active.png':'@/static/images/mine/vote1.png'"
								mode=""></image>
							<view>紙本</view>
						</view>
						<view :class="opentype==1?'flexleft select':'flexleft noSelect'"
							@click="opentype=1;tbcode=zjcode;">
							<image class="vote2Img"
								:src="opentype==1?'@/static/images/mine/vote2_active.png':'@/static/images/mine/vote2.png'"
								mode=""></image>
							<view>載具</view>
						</view>
						<view :class="opentype==2?'flexleft select':'flexleft noSelect'"
							@click="opentype=2;tbcode=tbcode1;">
							<image class="vote3Img"
								:src="opentype==2?'@/static/images/mine/vote3_active.png':'@/static/images/mine/vote3.png'"
								mode=""></image>
							<view>統編</view>
						</view>
						<view :class="opentype==3?'flexleft select':'flexleft noSelect'"
							@click="opentype=3;tbcode=jzcode;">
							<image class="vote4Img"
								:src="opentype==3?'@/static/images/mine/vote4_active.png':'@/static/images/mine/vote4.png'"
								mode=""></image>
							<view>捐贈</view>
						</view>
					</view>
					<view class="invoiceInput margin_top1 flexbetween" v-show="opentype!=0">
						<input class=" titletext" type="text" placeholder="請輸入手機載具" v-show="opentype==1"
							v-model="tbcode">
						<input class=" titletext" type="text" placeholder="請輸入統一編碼" @blur="getTt()" v-show="opentype==2"
							v-model="tbcode">
						<input class=" titletext" type="text" placeholder="請輸入捐贈碼" v-show="opentype==3"
							v-model="tbcode">
						<view class="" v-show="opentype==1 || opentype==3" @click="getCode()">
							<u-icon name="scan" color="#ffb800" size="28"></u-icon>
						</view>
					</view>
					<view class="invoiceInput margin_top1" v-show="opentype==2">
						<input class=" titletext" type="text" placeholder="請輸入發票抬頭" v-model="tbmc">
					</view>
				</template>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="titletext hei_text bold">施工/寄送 地址</view>
				<textarea class="margin_top mainpadding hei_text main_size radius" placeholder="請輸入地址" v-model="address"
					style="width: 100%; height: 100rpx;border: 1rpx solid #999;box-sizing: border-box;"></textarea>
			</view>
			<view class="margin_top border2 ffffff mainpadding">
				<view class="flexbetween">
					<view class="flexleft" @click="goShopInfo(orderInfo.shop_id)">
						<image class="shopImg margin_right1" src="/static/images/order/shop.png" mode=""></image>
						<view class="text_x color_ling margin_right1 xiankuan">{{orderInfo.shop_data.name}}</view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
					<view class="contactShop" @click="phone(orderInfo.shop_data.shopmbl)">打電話</view>
				</view>
				<view class="flexleft margin_top padding_bottom line_bottom dingwei"
					v-for="item in orderInfo.goods_data" :key="item.id">
					<view class="goodsImg margin_right3">
						<image :src="item.logoimage" mode=""></image>
						<view class="shipment" v-show="item.is_sell==1">已出貨</view>
					</view>
					<!-- <view class="saleLableclass" v-if="item.salename">{{item.salename}}</view> -->
					<view class="flex1 justify_between_column" style="height: 157rpx;">
						<view class="text_a color_san bold" v-if="item.salename">【{{item.salename}}】</view>
						<view class="text_a color_san bold">{{item.goods_name}}</view>
						<view class="xiaohui margin_top1 flexbetween" v-if="item.wei || item.hei">
							<text>尺寸：{{item.wei}}*{{item.hei}}</text>
							<!-- <text>用量：{{item.formulacount}}{{item.size}}</text> -->
						</view>
						<view class="xiaolan" v-if="item.spunatdata_text && item.spunatdata_text.length">規格：<text
								class="margin_right1" v-for="(value) in item.spunatdata_text"
								:key="value.spunatid">{{value.spunatname}}*{{value.num}}&nbsp;&nbsp;&nbsp;</text>
						</view>
						<view class="flexbetween margin_top1">
							<template v-if="orderInfo.status!=99 && orderInfo.status!=4">
								<view class="price">x{{item.num}}</view>
							</template>
							<template v-if="orderInfo.status==99 || orderInfo.status==4">
								<view class="price">x{{item.num}}</view>
								<!-- <view class="price">${{item.d_price}}&nbsp;&nbsp;&nbsp;x{{item.num}}</view>
								<view class="text_six color_orange">${{item.price}}</view> -->
							</template>
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="hei_text main_size bold">商品金額</view>
					<view class="text_x color_red">${{orderInfo.goods_money || 0}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">税金</view>
					<view class="text_a color_orange">${{s_money}}</view>
				</view>
				<view class="shanghuax margin_top1"></view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">總金額</view>
					<view class="text_a color_six">${{count_money}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">已收金額</view>
					<view class="text_a color_six">${{orderInfo.pay_price}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">未收金額</view>
					<view class="text_x color_red">
						${{Number(count_money) - Number(orderInfo.pay_price)}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">訂單編號</view>
					<view class="text_a color_six">{{orderInfo.order_sn}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">下單時間</view>
					<view class="text_a color_six">{{http.timereturn(orderInfo.createtime*1000)}}</view>
				</view>
				<view class="flexbetween margin_top1" v-if="orderInfo.ordernotes">
					<view class="text_a">備注</view>
					<view class="text_a color_six">{{orderInfo.ordernotes}}</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="hei_text main_size bold">收款協定</view>
				<view class="flexbetween margin_top1" v-if="orderInfo.status==87">
					<view class="hei_text main_size bold">訂金</view>
					<view class="huang_text main_size bold">${{orderInfo.d_money || 0}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="hei_text main_size bold">尾款</view>
					<view class="huang_text main_size">${{w_money || 0}}</view>
				</view>
			</view>
		</view>
		<view class="posibottom flexbetween mainpadding2">
			<view class="submitbtn margin_top" style="width: 45%;" @click="submit">待確認</view>
			<view class="submitbtn margin_top" style="width: 45%;" @click="submit(1)">確認並付款</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderCallid: "", //商家創建呼叫訂單分享給用戶用戶接收呼叫訂單到我的訂單
				address: "",
				googleKey: "",
				orderInfo: {},
				opentype: 0, //開票類型 0紙本 1載具 2統編 3捐贈
				tbcode: "", //開票内容
				tbcode1: "",
				jzcode: "",
				zjcode: "",
				tbmc: "",
				userInfo: {},
				fpopen: false,
				goodsTotalPrice: 0,
				pageShow: false
			}
		},
		onLoad(options) {
			this.orderCallid = options.id

		},
		onShow() {
			this.getInfo()
			this.getuserInfo()
		},
		computed: {
			s_money() {
				if (this.fpopen) {
					if (this.opentype == 0 || this.opentype == 1 || this.opentype == 2 || this.opentype == 3) {
						let price = 0
						this.orderInfo.goods_data.forEach(item => {
							price = Number((item.price * 0.05).toFixed(0)) + Number(price)
						})
						return price
					} else {
						return (Number(this.goodsTotalPrice) * 0.05).toFixed(0)
					}
				} else {
					return 0
				}
			},
			w_money() {
				if(this.orderInfo.status==87){
					return Number(this.count_money) - Number(this.orderInfo.d_money)
				}else{
					return Number(this.count_money) - Number(this.orderInfo.pay_price)
				}
			},
			count_money() {
				if (this.fpopen) {
					if (this.opentype == 0 || this.opentype == 1 || this.opentype == 2 || this.opentype == 3) {
						return this.goodsTotalPrice + Number(this.s_money)
					} else {
						return this.goodsTotalPrice
					}
				} else {
					return this.goodsTotalPrice
				}
			},

		},
		methods: {
			async getuserInfo() {
				let res = await this.http.request('/api/member/userInfo', 'GET', {})
				if (res.data.opentype != 0) {
					this.opentype = res.data.opentype
				}
				if (res.data.jzcode) {
					this.jzcode = res.data.jzcode
					this.tbcode = res.data.jzcode
				}
				if (res.data.tbcode) {
					this.tbcode = res.data.tbcode
					this.tbcode1 = res.data.tbcode
				}
				if (res.data.zjcode) {
					this.zjcode = res.data.zjcode
					this.tbcode = res.data.zjcode
				}
				if (this.opentype == 2) {
					this.tbcode = res.data.tbcode
				}
				uni.setStorageSync("invite_code", res.data.invite_code)
				this.tbmc = res.data.tbmc
				this.userInfo = res.data
			},
			async getInfo() {
				this.http.request('/api/ordercall/deailOrdermake', 'POST', {
					id: this.orderCallid,
				}).then(res => {
					if (res.data.status == 88) {
						this.http.toast("訂單已取消！")
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/order/order"
							})
						}, 500)
						return false
					}
					if (res.data.status == 99 && res.data.fpinfo) {
						this.http.toast("訂單已完成！")
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/order/order"
							})
						}, 500)
						return false
					}
					let goodsTotalPrice = 0
					res.data.goods_data.forEach(value => {
						value.logoimage = this.imgUrl + value.logoimage
						goodsTotalPrice = Number(goodsTotalPrice) + Number(value.price)
					})
					if (res.data.opentype != -1) {
						this.fpopen = true
					}
					this.goodsTotalPrice = goodsTotalPrice
					this.orderInfo = res.data
					if(res.data.address){
						this.address = res.data.address
					}else{
						this.getsystem()
						
					}
					this.pageShow = true
					this.submit(2)
				})
			},
			async getsystem() {
				let res = await this.http.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype: "gooleset",
					type: "google_key"
				})
				this.googleKey = res.data
				this.getlocation()
			},
			getlocation() {
				let that = this
				navigator.geolocation.getCurrentPosition(function(position) {
					let postData = {
						latlng: position.coords.latitude + "," + position.coords.longitude,
						key: that.googleKey
					}
					that.http.request('/api/index/getLocationInfo', 'GET', {
						latlng: postData.latlng,
					}).then(res => {
						that.address = res.data.results[0].formatted_address
					})
				});
			},
			submit(val) { //提交
				if (!this.address && val!=2) {
					this.http.toast("請輸入詳細地址")
					return false
				}
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let data = {
					id: this.orderCallid,
					address: this.address, //地址
					yuetime: (Number(new Date()) / 1000).toFixed(0),
					opentype: this.fpopen ? this.opentype : -1,
					tbcode: this.fpopen ? this.tbcode : '',
					tbmc: this.fpopen ? this.tbmc : '',
				}
				if (this.orderInfo.opentype == -1 && this.fpopen) { //原來不開發票,現在開發票了
					this.$set(data, "count_money", this.count_money)
					this.$set(data, "s_money", this.s_money)
					this.$set(data, "w_money", this.w_money)
				}
				if (this.orderInfo.opentype != -1 && !this.fpopen) { //原來開發票,現在不開了
					this.$set(data, "count_money", this.count_money)
					this.$set(data, "s_money", this.s_money)
					this.$set(data, "w_money", this.w_money)
				}
				this.http.request('/api/ordercall/saveOrderInfo', 'POST', data).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (val == 1) { //確認並付款
							if (this.orderInfo.status == 87) { //付定金
								uni.navigateTo({
									url: "/pages_index/payment?msg=" + encodeURIComponent(JSON.stringify({
										id: this.orderInfo.id,
										paymoney: this.orderInfo.d_money,
										shop_id: this.orderInfo.shop_id,
										order_type: 3,
										call_no: this.orderInfo.call_no
									}))
								})
							} else { //付尾款
								uni.navigateTo({
									url: "/pages_index/payment?msg=" + encodeURIComponent(JSON.stringify({
										id: this.orderInfo.id,
										paymoney: this.w_money,
										shop_id: this.orderInfo.shop_id,
										order_type: 2,
										call_no: this.orderInfo.call_no
									}))
								})
							}
						} else if (val == 2) { //直接放置用戶信息綁定訂貨
							console.log("綁定訂單");
						} else { //提交不跳轉付款
							this.http.toast("提交成功")
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/order/order"
								})
							}, 500)
						}
					} else {
						this.http.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style>
	.vote1Img {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote2Img {
		width: 23.5rpx;
		height: 23.5rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote3Img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote4Img {
		width: 27rpx;
		height: 27rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}


	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		position: relative;
	}

	.select::after {
		content: '';
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url('/static/images/mine/invoice_select.png');
		background-size: 100% 100%;
	}

	.invoiceInput {
		width: 100%;
		height: 91rpx;
		background: rgba(196, 196, 196, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		input {
			width: 80%;
		}
	}
</style>
<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	.shopImg {
		width: 26.62rpx;
		height: 24rpx;
		min-width: 26.62rpx;
	}

	.contactShop {
		min-width: 132rpx;
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: rgba(255, 196, 0, 0.1);
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.greyBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.orangeBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(255, 92, 0, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.popupBox {
		width: 660rpx;
		padding: 50rpx 50rpx 0;
		box-sizing: border-box;
	}

	::v-deep.u-steps-item__content {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 50rpx;
		flex: 1;
	}

	::v-deep.u-text:nth-child(2) {
		justify-content: flex-end !important;
	}
</style>